<!--
## 12、Vue：v-if&v-show

> 目标: 掌握如何控制html元素显示或隐藏

- v-if: 控制html元素是显示还是隐藏(true:显示、false:隐藏)
  语法：<html标签名 v-if=”true|false”></html标签名>

- v-show: 控制html元素是显示还是隐藏(true:显示、false:隐藏)
  语法：<html标签名 v-show=”true|false”></html标签名>
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs条件指令</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <!-- 1. v-if / v-else-if / v-else> -->
    <div>
        <span v-if="sex == 1">男</span>
        <span v-else-if="sex==0">女</span>
        <span v-else>保密</span>
    </div>

    <!--    2.v-if / v-else-if-->
    <div>
        <span v-if="sex == 1">男</span>
        <span v-else-if="sex == 0">女</span>
    </div>

    <!--    3. v-if / v-else-->
    <div>
        <span v-if="sex == 1">男</span>
        <span v-else>保密</span>
    </div>

</div>

<script type="text/javascript">
    var vue = new Vue({
        el: '#app',  // 渲染的html元素
        data: {      // 数据对象
            sex: 1   // 性别
        }
    });
</script>
</body>
</html>